﻿//名称：JQuery分页插件
//制作人：半支烟
//制作时间：2020
//一、使用方法如下：
// 1 以下是自由填充
//<div class="pager"></div>
//    $(".pager").pagination({
//        retcordCount: 3211,       //总记录数
//        pageSize: 10,           //一页记录数
//        onPageChange: function (pageIndex) {
//            document.title = pageIndex;
//        }
//    });
// 2 以下是模板填充
//        <div class="pageHtml">
//        <!--开始-->
//    <span style="cursor: pointer;">一共<span pagername="pluginretcordCount" style="color: Red;">102</span>条记录</span>
//    <span style="cursor: pointer;">第aa<span pagername="pluginpageIndex" style="color: Red;">1</span>/<span pagername="pluginpageCount" style="color: Red;">11</span>页</span>
//    <span style="cursor: pointer;">每a页<span pagername="pluginpageSize" style="color: Red;">10</span>条记录</span>
//    <span pagername="pluginfirst" class="disabled" style="cursor: default;">首页</span>
//    <span pagername="pluginprev" class="disabled" style="cursor: default;">上一页</span>
//    <span pagername="pluginnav" style="cursor: pointer;"><a class="pluginnavi"><span style="color: #999">1</span></a></span>
//    <span pagername="pluginnext" class="" style="cursor: pointer;">下一a页</span>
//    <span pagername="pluginlast" class="" style="cursor: pointer;">末a页</span>
//    <input pagername="plugintxtNum" class="cssTxt" type="text" size="1">
//    <span pagername="pluginbtnTo" style="cursor: pointer;">GaO</span>
//            <!--结束-->
//        </div>

//        $(".pageHtml").pagination({
//                retcordCount: 3211,       //总记录数
//                pageSize: 10,           //一页记录数
//                templetHtml: "pageHtml",
//                onPageChange: function (pageIndex) {
//                    document.title = pageIndex;
//                }
//                });
//二、全部参数和默认值如下
//            //总数量
//            retcordCount: -1
//            //每页数
//            pageSize: 10
//            //当前页
//            pageIndex: 1
//            //总页数
//            pageCount: 0
//            //页号导航的数量
//            navCount: 5
//            //导航数字css
//            naviCss: "navi"
//            //模板div的css样式名称
//            templetHtml: "pageHtml"

(function ($) {
    $.PagePlugIn = function (options) {
        
        var $this = $(this);

        var pager = {
            //首页
            pluginfirst: null,
            //上一页
            pluginprev: null,
            //导航区按钮
            pluginnav: null,
            //下一页
            pluginnext: null,
            //最后页
            pluginlast: null,
            //指定页输入框
            plugintxtNum: null,
            //指定页按钮
            pluginbtnTo: null,
            //总行数
            pluginretcordCount: null,
            //当前页
            pluginpageIndex: null,
            //总页数
            pluginpageCount: null,
            //每页数量
            pluginpageSize: null,
            //初始化
            Init: function () {
                $this.find("[pagername]").each(function () {
                    var name = $(this).attr("pagername");
                    if (name && name.length) {
                        pager[name] = $(this);
                    }
                });
                pager.SetPageUI();
            },
            //默认数据
            SetDefault: function (info) {
                var defaultSetting = {
                    //总数量
                    retcordCount: -1,
                    //每页数
                    pageSize: 10,
                    //当前页
                    pageIndex: 1,
                    //总页数
                    pageCount: 0,
                    //前次页面
                    pageBefault: 1,
                    //页号导航的数量
                    navCount: 5,
                    //导航数字css
                    naviCss: "navi",
                    //模板div的css样式名称
                    templetHtml: "pageHtml",
                };
                return $.extend(defaultSetting, info);
            },
            //设置ui html
            SetPageUI: function () {
                //未传总页数计算出总页数
                if (options.pageCount == 0) {
                    if (options.retcordCount % options.pageSize == 0) {
                        options.pageCount = options.retcordCount / options.pageSize;
                    }
                    else {
                        options.pageCount = parseInt(options.retcordCount / options.pageSize) + 1;
                    }
                }
                //总量
                pager.pluginretcordCount && pager.pluginretcordCount.html(options.retcordCount);
                //当前页
                pager.pluginpageIndex && pager.pluginpageIndex.html(options.pageIndex);
                //总页数
                pager.pluginpageCount && pager.pluginpageCount.html(options.pageCount);
                //每页数量
                pager.pluginpageSize && pager.pluginpageSize.html(options.pageSize);
                //输入框数字
                pager.plugintxtNum && pager.plugintxtNum.val(options.pageIndex);
                //设定光标
                $this.find("span").css("cursor", "pointer");
                //光标说明
                //default:默认光标（通常是一个箭头）
                //pointer:光标呈现为指示链接的指针（一只手）
                switch (parseInt(options.pageIndex)) {
                    case 1: //第一页
                        pager.pluginfirst && pager.pluginfirst.hide().css("cursor", "default");
                        pager.pluginprev && pager.pluginprev.hide().css("cursor", "default");

                        pager.pluginnext && pager.pluginnext.show().css("cursor", "pointer");
                        pager.pluginlast && pager.pluginlast.show().css("cursor", "pointer");
                        break;
                    case options.pageCount: //最后一页
                        pager.pluginfirst && pager.pluginfirst.show().css("cursor", "pointer");
                        pager.pluginprev && pager.pluginprev.show().css("cursor", "pointer");

                        pager.pluginnext && pager.pluginnext.hide().css("cursor", "default");
                        pager.pluginlast && pager.pluginlast.hide().css("cursor", "default");
                        break;
                    default://其他页面时
                        pager.pluginfirst && pager.pluginfirst.show().css("cursor", "pointer");
                        pager.pluginprev && pager.pluginprev.show().css("cursor", "pointer");

                        pager.pluginnext && pager.pluginnext.show().css("cursor", "default");
                        pager.pluginlast && pager.pluginlast.show().css("cursor", "default");
                        break;
                }
            },                      
            //创建导航
            SetNav: function () {
                if (!pager.pluginnav) return;
                var navhtml = "<a class=\"" + options.naviCss + "\">{text}</a>";
                var navval = pager.pluginnav;
                navval.empty();
                var i;
                var temp = "";
                //左
                var temp1;
                //右
                var temp2;
                //中间数
                var navCountval = (options.navCount % 2) == 1 ? options.navCount / 2 | 0 : options.navCount / 2;
                if ((options.pageIndex - navCountval) < 1) {
                    temp1 = 1;
                    temp2 = options.navCount;
                }
                else if ((options.pageIndex + navCountval) >= options.pageCount) {
                    temp1 = options.pageCount - options.navCount + 1;
                    temp2 = options.pageCount;
                    if (temp1 < 1)
                        temp1 = 1;
                }
                else {
                    temp1 = options.pageIndex - navCountval;
                    temp2 = options.pageIndex + navCountval;
                    if (temp2 > options.pageCount)
                        temp2 = options.pageCount;
                }
                if (temp2 > options.pageCount)
                    temp2 = options.pageCount;
                if (temp1 >= 2) {
                    temp = navhtml.replace("{text}", 1);
                    navval.append(temp);
                }
                if (temp1 >= 3) {
                    temp = navhtml.replace("{text}", "...");
                    navval.append(temp);
                }
                //当前页码
                for (var i = temp1; i < temp2; i++) {
                    temp = navhtml.replace("{text}", i == options.pageIndex ? "<font style=\"color:#999\">" + i + "</font>" : i);
                    navval.append(temp);
                }
                if (temp2 <= options.pageCount - 2) {
                    temp = navhtml.replace("{text}", "...");
                    navval.append(temp);
                }
                if (temp2 <= options.pageCount - 1) {
                    temp = navhtml.replace("{text}", options.pageCount);
                    navval.append(temp);
                }
                //设定
                var naviA = navval.find("a");
                naviA.each(function () {
                    $(this).on('click', function () {
                        options.pageBefault = options.pageIndex;
                        if (this.innerHTML == "...") {
                            var al = naviA[j - 1];
                            if (a1.innerHTML == "1") {
                                //前取后
                                a1 = naviA[j + 1];
                                options.pageIndex = parseInt($(a1).text()) - 1;
                            }
                            else {
                                //后取前
                                a1 = naviA[j - 1];
                                options.pageIndex = parseInt($(a1).text()) + 1;
                            }
                        }
                        else {
                            options.pageIndex = $(this).text();
                        }
                        if (options.pageBefault == options.pageIndex) return;
                        pager.SetChanged();
                    })
                });
            },
            //设置翻页事件 包含上一页，下一页，首页，最后一页, 直达
            SetPageEvent: function () {
                //首页
                pager.pluginfirst && pager.pluginfirst.on('click', function () {
                    if (options.pageIndex != 1) {
                        addEvent("f");
                    }
                });
                //末页
                pager.pluginlast && pager.pluginlast.on('click', function () {
                    if (options.pageIndex != options.pageCount) {
                        addEvent("l");
                    }
                });
                //上一页
                pager.pluginprev && pager.pluginprev.on('click', function () {
                    if (options.pageIndex != 1) {
                        addEvent("u");
                    }
                });
                //下一页
                pager.pluginnext && pager.pluginnext.on('click', function () {
                    if (options.pageIndex != options.pageCount) {
                        addEvent("d");
                    }
                });
                //直达
                pager.pluginbtnTo && pager.pluginbtnTo.on('click', function () {
                    addEvent("go");
                });
                var addEvent = function (info) {
                    options.pageBefault = options.pageIndex;
                    switch (info) {
                        //首页
                        case "f": options.pageIndex = 1; break;
                            //末页
                        case "l": options.pageIndex = options.pageCount; break;
                            //上一页
                        case "u": options.pageIndex = parseInt(options.pageIndex) - 1; break;
                            //下一页
                        case "d": options.pageIndex = parseInt(options.pageIndex) + 1; break;
                            //直达
                        case "go": options.pageIndex = parseInt(pager.plugintxtNum.val()); break;
                    }
                    pager.SetChanged();
                };
            },
            //页面变更
            SetChanged: function (Pindex) {
                if (Pindex) options.pageIndex = Pindex;
                if (isNaN(options.pageIndex)) {
                    alert("页码错误！");
                    return;
                }
                options.pageIndex = parseInt(options.pageIndex);
                if (options.pageIndex > options.pageCount)
                    options.pageIndex = options.pageCount;
                if (options.pageIndex < 1)
                    options.pageIndex = 1;

                options.onPageChange && options.onPageChange.call(options, options.pageIndex);
                pager.SetPageUI();
                pager.SetNav();
            }
        };


        options = pager.SetDefault(options);//设置默认        
        //分页html
        var html = $("." + options.templetHtml).html();
            
        if (!/<[^>]+>/.test(html)) {
            html = '<span style="cursor: pointer;">共<span pagername="pluginretcordCount" style="color: Red;">102</span>条记录</span><span style="cursor: pointer;">   第<span pagername="pluginpageIndex" style="color: Red;">1</span>/<span pagername="pluginpageCount" style="color: Red;">11</span>页</span><span style="cursor: pointer;">    每页<span pagername="pluginpageSize" style="color: Red;">10</span>条记录    </span><span pagername="pluginfirst" class="disabled" style="cursor: default;">首页</span><span pagername="pluginprev" class="disabled" style="cursor: default;">上一页  </span><span pagername="pluginnav" style="cursor: pointer;"><a class="navi"><span style="color: #999">1</span></a></span><span pagername="pluginnext" class="" style="cursor: pointer;">下一页  </span><span pagername="pluginlast" class="" style="cursor: pointer;">末页    </span><input pagername="plugintxtNum" class="cssTxt" type="text" size="1"><span pagername="pluginbtnTo" style="cursor: pointer;">   GO</span>';
            $this.html(html);
        }
        else {
            $this.html(html);
        }

        

        //初始化 缓存控件
        pager.Init();
        //注册上一页 下一页等事件
        pager.SetPageEvent();
        //创建导航
        pager.SetNav();
        this.pager = pager;
        return this;
    }
    $.fn.pagination = function (pagerInfo)
    {
        this.each(function () {
            $.PagePlugIn.call(this, pagerInfo);
        });
    }
    $.fn.PageChanged = function (pageIndex) {
        this[0].pager && this[0].pager.SetChanged.call(this, pageIndex);
    };
}(jQuery));


